<template>
    <div class="sider">
        <div v-for="(item,index) in siderList" :key="index" style="margin-bottom: 25px;">
            <Tooltip :content="item.toolContent" placement="right" transfer>
                <div class="icon" @click="handleClick(item,index)">
                    <svg version="1.1" viewBox="0 0 1024 1024" fill=#8c8c8c :width="item.width||'25px'" :class="{active:index === current}">
                        <path :d="item.d"></path>
                    </svg>
                </div> 
            </Tooltip>

        </div>
        
    </div>
</template>
<script>
export default {
    data(){
        return{
            current:0,
            siderList:[
                {code:'sql',toolContent:'SQL',d:'M128 384h384V0h384v1024H128V384z m1.408-85.312L426.688 0.256v298.432H129.408z m119.488 472.704c1.6 18.496 8.384 33.728 20.416 45.76 11.968 11.968 33.536 17.92 64.704 17.92 17.792 0 32.512-2.56 44.16-7.68a60.992 60.992 0 0 0 27.264-22.528 58.112 58.112 0 0 0 9.728-32.512 51.52 51.52 0 0 0-7.296-27.072 55.936 55.936 0 0 0-23.424-20.352c-10.688-5.44-28.416-10.88-53.12-16.192-10.048-2.048-16.384-4.288-19.008-6.72-2.752-2.368-4.16-4.992-4.16-7.872a12.8 12.8 0 0 1 4.992-10.24c3.328-2.752 8.32-4.16 14.912-4.16 8 0 14.272 1.92 18.816 5.632 4.48 3.776 7.488 9.728 8.96 17.984l53.312-3.136c-2.304-18.944-9.6-32.832-21.952-41.536-12.288-8.704-30.08-13.056-53.504-13.056-19.136 0-34.112 2.368-45.12 7.168a54.336 54.336 0 0 0-24.576 19.776 48 48 0 0 0-8.192 26.688 44.8 44.8 0 0 0 16 35.392c10.56 9.216 28.288 16.64 53.12 22.208 15.168 3.328 24.832 6.912 28.992 10.624a16.832 16.832 0 0 1 6.272 12.8 17.024 17.024 0 0 1-6.592 13.12 27.712 27.712 0 0 1-18.688 5.76c-10.88 0-19.2-3.776-24.96-11.2A41.088 41.088 0 0 1 302.72 768l-53.888 3.392z m391.36-122.624V832h145.024v-45.12h-88.32v-138.112h-56.704z m-42.176 156.48c13.376-16.256 20.032-37.888 20.032-65.024 0-30.4-8.32-53.76-24.832-70.08-16.512-16.384-40-24.512-70.4-24.512-29.888 0-53.12 8.32-69.76 25.024-16.64 16.768-24.896 40.192-24.896 70.4 0 31.04 9.472 55.168 28.48 72.32 16.128 14.528 38.08 21.76 65.92 21.76 18.816 0 34.496-2.688 46.976-8.128 3.072 2.688 8.512 6.656 16.256 11.904 7.744 5.312 15.552 9.856 23.488 13.696l15.744-31.744a152.832 152.832 0 0 1-13.12-6.4 264.768 264.768 0 0 1-13.888-9.216z m-43.328-28.992c4.48-8.064 6.72-20.16 6.72-36.224 0-18.56-3.456-31.744-10.304-39.68a35.712 35.712 0 0 0-28.416-11.84 34.496 34.496 0 0 0-27.392 12.16c-7.04 8.064-10.496 20.672-10.496 37.824 0 20.032 3.392 34.048 10.24 42.112 6.848 8.128 16.192 12.16 28.16 12.16 3.84 0 7.424-0.384 10.88-1.152a70.08 70.08 0 0 0-22.528-12.992l8.832-20.352a48.128 48.128 0 0 1 11.712 3.328c2.816 1.344 8.256 4.864 16.32 10.496 1.92 1.344 3.968 2.752 6.272 4.16z'},
                {code:'job',toolContent:'Job List',d:'M672 491.968C588.352 560.256 512 634.176 512 634.176L373.504 467.2l-67.2 67.2c0 0 59.392 68.352 112 134.4C471.104 735.104 512 797.12 512 797.12s108.416-123.968 216.448-224.448c60.736-56.448 135.104-121.728 190.784-169.984l0 458.88c0 54.336-44.096 98.432-98.432 98.432L203.136 960c-54.336 0-98.432-44.096-98.432-98.432L104.704 310.144c0-12.352 4.8-24.256 13.44-33.088l193.92-198.784C321.024 69.184 333.248 64 345.984 64l474.816 0c54.336 0 98.432 44.096 98.432 98.432l0 150.208C861.056 352.128 746.176 431.36 672 491.968z'},
                {code:'schema',toolContent:'Schema Explorer',d:'M512 1024c-212.032 0-384-85.952-384-192v-108.032C128 830.08 299.968 896 512 896s384-65.92 384-172.032V832c0 106.048-171.968 192-384 192z m0-192c-212.032 0-384-85.952-384-192v-108.032C128 638.08 299.968 704 512 704s384-65.92 384-172.032V640c0 106.048-171.968 192-384 192z m0-192c-212.032 0-384-85.952-384-192v-108.032C128 446.08 299.968 512 512 512s384-65.92 384-172.032V448c0 106.048-171.968 192-384 192z m0-192c-212.032 0-384-85.952-384-192V192c0-106.048 171.968-192 384-192s384 85.952 384 192v64c0 106.048-171.968 192-384 192z'},
                {width:'30px',code:'latestJob',toolContent:'The Latest Job',d:'M503.1 107.1c-218.8 0-396 177.3-396 396 0 218.8 177.3 396.1 396 396.1s396-177.3 396-396.1c0-218.7-177.4-396-396-396zM470 532.4V206.1h66v300.3l148.7 148.7-46.2 46.3L470 536.2v-3.3'},
                {code:'export',toolContent:'Export',d:'M512 0C229.2224 0 0 229.2224 0 512s229.2224 512 512 512 512-229.2224 512-512S794.7776 0 512 0z m182.971733 618.171733l-156.296533 156.296534a33.928533 33.928533 0 0 1-5.2224 4.266666c-0.836267 0.5632-1.757867 0.955733-2.645333 1.4336-1.0752 0.580267-2.0992 1.2288-3.242667 1.706667-1.1264 0.4608-2.304 0.733867-3.464533 1.0752-0.9728 0.290133-1.911467 0.6656-2.9184 0.8704a33.826133 33.826133 0 0 1-13.380267 0c-1.024-0.2048-1.962667-0.580267-2.952533-0.8704-1.143467-0.341333-2.304-0.597333-3.413334-1.058133-1.1776-0.477867-2.235733-1.143467-3.345066-1.757867-0.836267-0.4608-1.723733-0.836267-2.525867-1.3824a35.003733 35.003733 0 0 1-5.239467-4.283733l-156.3136-156.3136c-12.032-12.032-14.984533-31.3856-5.051733-45.2096a34.133333 34.133333 0 0 1 51.985067-4.386134l70.263466 70.263467c10.752 10.752 29.1328 3.140267 29.1328-12.066133v-352.426667c0-16.9984 11.6224-32.768 28.398934-35.498667a34.1504 34.1504 0 0 1 39.867733 33.672534v354.2528c0 15.2064 18.3808 22.818133 29.1328 12.066133l70.263467-70.2464a34.133333 34.133333 0 0 1 51.985066 4.386133c9.966933 13.824 7.0144 33.1776-5.0176 45.2096z'},
                {code:'version',toolContent:'Version',d:'M977.6 524.8c0-262.4-212.8-475.2-475.2-475.2S28.8 262.4 28.8 524.8s212.8 475.2 475.2 475.2 473.6-212.8 473.6-475.2M571.2 744c-70.4 75.2-158.4 99.2-169.6 43.2-8-43.2 33.6-196.8 41.6-254.4 3.2-19.2-20.8 0-20.8 0s-68.8 48-84.8 20.8c-3.2-4.8 14.4-17.6 20.8-20.8 0 0 144-105.6 190.4-84.8 46.4 20.8-16 150.4-20.8 169.6-4.8 19.2-35.2 166.4 64 84.8 0-1.6 49.6-33.6-20.8 41.6z m-36.8-361.6c-41.6-1.6-72-36.8-70.4-78.4 1.6-41.6 36.8-72 78.4-70.4 41.6 1.6 72 36.8 70.4 78.4-1.6 41.6-36.8 72-78.4 70.4z'},
                ]
        }
    },
    methods:{
        handleClick(item,index){
            if(item.code!=='version'&&item.code!=='export'){
                this.current = index
            }
            this.$emit('siderHandle',item)

        }
    }
}
</script>
<style lang="less" >
    .ivu-tooltip-dark .ivu-tooltip-content .ivu-tooltip-inner{
            color: #fff !important;
            background-color: rgba(70,76,91,.9) !important;
        }
    .sider{
        position:fixed;
        display:flex;
        flex-direction: column;
        justify-content: flex-start;
        background-color: #fff;
        border-right: 1px solid #dedee4;
        padding-top: 15px;
        width: 40px;
        height: calc(100% - 50px);
        
        .active{
            fill:#000
        }
        .icon{
            height: 35px;
            width: 35px;
            display: flex;
            justify-content: center;
        }
    }
</style>